import React, { useState, useCallback, useMemo } from 'react';
import { Modal } from 'antd';
import { Table } from '@library';
import IconButton from './../iconButton/IconButton';
import { forecastColumns } from './data';

const bodyStyle: React.CSSProperties = {
  height: '500px',
  maxHeight: '500px',
  display: 'flex',
  flexDirection: 'column',
};
interface AuditHistoryProps {
  workFlowInstanceId?: string | null;
}

const dfPageSizeOptions = ['20'];

export default ({ workFlowInstanceId }: AuditHistoryProps) => {
  const [visible, setVisible] = useState(false);
  const onCancel = useCallback(() => setVisible(false), []);
  const onShow = useCallback(() => setVisible(true), []);

  const query = useMemo(() => ({
    WorkFlowInstanceId: workFlowInstanceId
  }), [workFlowInstanceId]);

  return (
    <>
      <IconButton onClick={onShow} icon="icon" text={window.$app.t('approvalForecast')} />
      <Modal bodyStyle={bodyStyle} title={window.$app.t('approvalForecast')} width={1000} onCancel={onCancel} visible={visible} footer={null}>
        <Table dfPageSizeOptions={dfPageSizeOptions} query={query} columns={forecastColumns} url="/bk/mid/workflow/getForecastTask" />
      </Modal>
    </>
  );
};
